<template>
  <div class="main detail">
       <!-- <Info></Info> -->
       <Nav></Nav>
    <div class="show-one" :class="{darkDetail:darkTheme}"> 
       <div id="show-inner" v-if="article">
        <div class="page-header">
          <h2>{{article.title}}</h2>
          <span class="date"><i class="el-icon-date"></i>{{article.date}}</span>
        </div>
          
        <div class="page-content">
          <mavon-editor
              v-model="article.content"
              ref=md
              :boxShadow="false"
              :subfield = "false"
              :defaultOpen = "'preview'"
              :toolbarsFlag = "false"
              :editable="false"
              :scrollStyle="true"
              :ishljs = "true"
          >
          </mavon-editor>
          
          <div class="taglist">
            <div>
              标签：
              <el-tag v-for="(item,index) in article.tag" :key="index">{{item}}</el-tag>
            </div>
            
            <el-row class="tools">
                  <el-button type="warning" icon="el-icon-tableware" circle size="mini" title="干饭"></el-button>
                  <el-button type="success" icon="el-icon-back" circle size="mini" title="返回上一页" @click="goback"></el-button>
                  <el-button type="primary" icon="el-icon-share" circle size="mini" title="分享"></el-button>
            </el-row>
          </div>
        </div>
        <!-- <el-backtop>
        </el-backtop> -->
        <div class="change">
            <el-link type="primary" class="pre" :underline="false" v-if="cur>0" @click="back"><i class="el-icon-back"></i> {{preTitle}}</el-link>
            <el-link type="success" class="next" :underline="false" v-if="cur<articleNum-1" @click="next">{{nextTitle}}<i class="el-icon-right"></i></el-link>
        </div>
        <div class="comments">
            <h2 class="myheader">评论内容</h2>
            <top-gitment :options="options" v-if="options"></top-gitment>
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
// import Info from './Info';
import Nav from './Nav'
// import uri from '@/config/uri'

import {mapState} from 'vuex'
export default {
  data(){
    return {
      article:{
        title: '测试文章',
        date: new Date(),
        content: '测试内容',
      },
      cur:0,
      // prePage:0,
      // nextPage:0,
      preTitle:'',
      nextTitle:'',
      nextIndex:0,
      preIndex:0,
      value2: null,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      options: {
        id: '', // 评论页唯一标识符
        owner: 'Anyway521',// github用户名
        repo: 'ele-comment', // 用于存放评论的仓库
        oauth: {
          client_id: '707e576b4ce9584e9aeb', 
          client_secret: 'c3199ac7e6a6cf0c0a86327c5615d6708f039ef2',
        } 
      }
    }
  },
  computed:{
     ...mapState("article",["articleList","articleNum"]),
     ...mapState("common",["darkTheme"]),
  },
  components:{
    Nav
  },
  methods:{
     goback(){
       this.$router.go(-1)
     },
     back(){
       window.location.href = "./"+this.preIndex
     },
     next(){
       window.location.href = "./"+ this.nextIndex
     },
     showAll(){
        let pageId = parseInt(this.$route.params.page_id)
        // console.log(typeof pageId)
        this.article = this.articleList[pageId]
        this.options.id = this.article._id
        this.cur = pageId
        if(pageId>=1){
          this.preIndex = pageId-1
          if(this.articleList[pageId-1]){
            this.preTitle = this.articleList[pageId-1].title
          }
        }
        if(pageId<this.articleNum-1){
          this.nextIndex = pageId+1
          if(this.articleList[pageId+1]){
             this.nextTitle = this.articleList[pageId+1].title
          }
        }
     }
  },
  created(){
    //根据从前面(Article.vue)传来的index，在tmplist里取出该数据进行渲染
    this.showAll()
  },
  watch:{
    article(){
      this.showAll()
    }
  }
}
</script>

<style lang="scss">
.detail{
  margin-top: 80px;
  position: relative;
}

.show-one {
  position: absolute;
  right: 0;
  width: 880px;
  background-color: aliceblue;
  height: 600px;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 20px;
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fbfbfb;
    h2 {
      line-height: 50px;
      text-align: left;
      text-indent: 2em;
      border-left: 4px solid #409eff;
    }
    span {
      margin-right: 50px;
      color: cornflowerblue;
      i {
        margin-right: 5px;
      }
    }
  }
  .page-content {
    .v-note-wrapper {
      .v-note-op {
        position: relative !important;
        background: transparent !important;
        border: none !important;
      }
    }
  }
  .comments {
    text-align: left;
    margin-top: 30px;
    .myheader{
      border-left: 3px solid #409eff;
      text-indent: 1em;
      color: #909399;
    }
    .gitment-comment-header{
      background-color: transparent;
      .gitment-editor-tab{
        border: none!important;
      }
    }
    .gitment-editor-header{
      border: none;
    }
    .gitment-header-container{
      display: none;
    }
    .gitment-comment-main, .gitment-editor-main{
      border: 1px solid #afd6fc;
      border-radius: 5px;
    }
    .gitment-editor-body textarea{
       border-radius: 0 0 5px 5px;
    }
    .gitment-editor-tab{
      margin-left: 1px;
      &:first-of-type{
        border-radius: 5px 0 0 0;
      }
    }
    .gitment-comments-empty, .gitment-comments-error, .gitment-comments-loading{
      margin: 35px 0;
    }
    .gitment-editor-tab.gitment-selected{
      border-color: transparent;
    }
    .gitment-container *{
      color: #909399;
      font-size: 14px;
      // color: #c6d2ea;
    }
    .gitment-comment-main:after, .gitment-comment-main:before, .gitment-editor-main:after, .gitment-editor-main:before{
      display: none;
    }
  }
  .taglist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fbfbfb;
    text-align: left;
    line-height: 50px;
    padding-left: 30px;
    .el-tag {
      margin: 0 5px;
    }
    .tools {
      margin-right: 40px;
    }
  }
  .change {
    position: relative;
    box-sizing: border-box;
    padding: 20px;
    .pre {
      float: left;
    }
    .next {
      float: right;
    }
  }
}


/* 暗夜主题 */
.darkDetail{
  background-color: #263c4f;
  box-shadow: 0 0 10px rgb(61 122 132 / 50%);
  .comments {
    .myheader{
      color: #c6d2ea;
    }
    .gitment-container *{
      color: #c6d2ea;
    }
  }
}
</style>